<template>
	<div class="yz">
		<!-- 头像 -->
		<div class="aval" @click="$pub.naviTo('/pages/other/Setting/myInfoSet/index')">
			<image class="img" :src='UserInfo.avatar' mode="aspectFill"></image>
		</div>
		<!-- 信息 -->
		<div class="info">
			<div class="info-name">{{UserInfo.Nickname}}</div>
			<div class="info-progressBar">
				<div class="info-progressBar-up" :style="{width:percentage+'%',backgroundColor:bg_progressBar}"></div>
			</div>

			<div class="info-progressText">
				<!-- {{animatedNumber}}asd -->
				{{$tool.comFileSize(inner_currentSize)}} / {{$tool.comFileSize(UserInfo.UserStorageSpace)}}
				<span class="progressText-span">管理空间</span>
			</div>
		</div>
		<!-- 签到按钮 -->
		<view class="yy-btn" :style="{ opacity: opacity }" @click="btntap">
			<span>{{ text }}</span>
		</view>
	</div>
</template>

<script>
	// 数字加载动画
	import TweenLite from 'gsap'
	let ColorConfig = ['skyblue', '#fbbd08', 'red']; // 颜色配置表
	export default {
		props: {
			'UserInfo': {
				type: Object,
				default: {
					avatar: "网络错误",
					Nickname: "网络错误"
				}
			},
			'CurrentSize': {
				type: Number,
				default: 0
			}
		},
		name: '',
		data() {
			return {
				opacity: '1',
				text: '签到',

				inner_currentSize: 0, // 组件内部 用来做数字加载动画
				percentage: 0, // 百分比

				bg_progressBar: ColorConfig[0] // 进度条背景颜色
			};
		},
		watch: {
			CurrentSize: {
				handler(newQuestion, oldQuestion) {
					TweenLite.to(this.$data, {
						duration:1,
						inner_currentSize: newQuestion
					});
					// 空间大小
					let ALLCapacity = Math.pow(1024, 3) * 1 // 1G
					let UserUserCapacity = this.CurrentSize / Math.pow(1024, 3) // 单位转化
					this.percentage = (this.CurrentSize / ALLCapacity).toFixed(4) * 100

					if (this.percentage <= 50) {
						this.bg_progressBar = ColorConfig[0]
					}
					if (this.percentage > 50) {
						this.bg_progressBar = ColorConfig[1]
					}
					if (this.percentage > 80) {
						this.bg_progressBar = ColorConfig[2]
					}
					if (this.percentage >= 100) {
						return this.percentage = 100
					}
				},
				immediate: true
			}
		},
		methods: {
			btntap() {
				this.opacity = '0.4';
				this.text = '已签到';
			}
		}
	};
</script>
<style lang="less" scoped>
	.yz {
		// background-color: #fff;
		padding: 20px;
		display: flex;
		align-items: center;

		.aval {

			// height: 60px;
			// width: 60px;
			// background-color: #ffffff;
			// display: flex;
			// justify-content: center;
			// align-items: center;
			// border-radius: 50%;
			// overflow: hidden;
			.img {
				border-radius: 50%;
				height: 120rpx;
				width: 120rpx;
			}
		}

		.info {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-left: 12px;
			margin-right: 12px;

			.info-name {
				font-size: 18px;
				font-weight: 600;
				width: 200px;
			}

			.info-progressBar {
				box-sizing: border-box;
				margin: 10px 0px;
				width: 200px;
				height: 4px;
				border-radius: 10px;
				position: relative;
				background-color: #dedede;
				border-radius: 100rpx;

				.info-progressBar-up {
					position: absolute;
					// background-color: skyblue;
					height: inherit;
					width: 0;
					border-radius: 100rpx;
					transition: 2s ease;
					// animation: changeBgColor;
				}
			}

			.info-progressText {
				width: 200px;
				display: flex;
				justify-content: space-between;

				.progressText-span {
					color: #ff9800;
				}
			}
		}
	}

	@keyframes changeBgColor {
		from {
			left: 0px;
		}

		to {
			left: 200px;
		}
	}
</style>
